<template>
	<view class="container">
		<view class="summary-card">
			<view class="card-header">
				<text class="card-title">今日巡查任务</text>
				<text class="card-date">{{currentDate}}</text>
			</view>
			<view class="progress-info">
				<view class="progress-text">
					<text class="progress-percent">{{calculatePercent}}%</text>
					<text class="progress-count">{{completedCount}}/{{totalCount}}</text>
				</view>
				<view class="progress-bar">
					<view class="progress" :style="{ width: calculatePercent + '%' }"></view>
				</view>
			</view>
		</view>
		
		<view class="task-list">
			<view class="list-header">
				<text class="list-title">巡查点列表</text>
				<text class="list-filter" @click="showFilter = true">筛选</text>
			</view>
			
			<view class="patrol-item" v-for="(item, index) in patrolList" :key="index" @click="navToDetail(item)">
				<view class="item-info">
					<view class="location-tag" :class="{ 'status-completed': item.status === 'completed' }">{{item.location}}</view>
					<view class="item-content">
						<text class="item-name">{{item.name}}</text>
						<text class="item-desc">{{item.description}}</text>
						<text class="item-time">计划时间：{{item.planTime}}</text>
					</view>
				</view>
				<view class="item-status" :class="'status-' + item.status">
					<text>{{getStatusText(item.status)}}</text>
				</view>
			</view>
			
			<view class="empty-tip" v-if="patrolList.length === 0">
				<text>暂无巡查任务</text>
			</view>
		</view>
		
		<!-- 筛选弹窗 -->
		<view class="filter-mask" v-if="showFilter" @click="showFilter = false">
			<view class="filter-panel" @click.stop>
				<view class="filter-header">
					<text class="filter-title">筛选</text>
					<text class="filter-close" @click="showFilter = false">×</text>
				</view>
				<view class="filter-content">
					<view class="filter-item">
						<text class="filter-label">状态</text>
						<view class="filter-options">
							<view class="filter-option" :class="{ active: statusFilter === 'all' }" @click="statusFilter = 'all'">全部</view>
							<view class="filter-option" :class="{ active: statusFilter === 'pending' }" @click="statusFilter = 'pending'">待巡查</view>
							<view class="filter-option" :class="{ active: statusFilter === 'completed' }" @click="statusFilter = 'completed'">已完成</view>
						</view>
					</view>
					<view class="filter-item">
						<text class="filter-label">区域</text>
						<view class="filter-options">
							<view class="filter-option" :class="{ active: areaFilter === 'all' }" @click="areaFilter = 'all'">全部</view>
							<view class="filter-option" :class="{ active: areaFilter === 'teach' }" @click="areaFilter = 'teach'">教学区</view>
							<view class="filter-option" :class="{ active: areaFilter === 'live' }" @click="areaFilter = 'live'">生活区</view>
							<view class="filter-option" :class="{ active: areaFilter === 'office' }" @click="areaFilter = 'office'">办公区</view>
						</view>
					</view>
				</view>
				<view class="filter-buttons">
					<view class="filter-reset" @click="resetFilter">重置</view>
					<view class="filter-confirm" @click="confirmFilter">确定</view>
				</view>
			</view>
		</view>
		
		<!-- 新增巡查按钮 -->
		<view class="add-btn" @click="addRecord">
			<text class="add-icon">+</text>
			<text>新增巡查记录</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentDate: '',
				totalCount: 8,
				completedCount: 3,
				showFilter: false,
				statusFilter: 'all',
				areaFilter: 'all',
				patrolList: [
					{
						id: '001',
						name: '教学楼A栋巡查',
						location: '教学区',
						planTime: '08:00-09:00',
						description: '检查教学楼A栋各个楼层，注意安全隐患',
						status: 'completed'
					},
					{
						id: '002',
						name: '学生宿舍B栋巡查',
						location: '生活区',
						planTime: '10:00-11:00',
						description: '检查学生宿舍B栋周边环境和安全设施',
						status: 'completed'
					},
					{
						id: '003',
						name: '图书馆巡查',
						location: '教学区',
						planTime: '13:00-14:00',
						description: '检查图书馆安全通道和设施',
						status: 'completed'
					},
					{
						id: '004',
						name: '行政楼巡查',
						location: '办公区',
						planTime: '15:00-16:00',
						description: '检查行政楼各个办公室和公共区域',
						status: 'pending'
					},
					{
						id: '005',
						name: '食堂巡查',
						location: '生活区',
						planTime: '17:00-18:00',
						description: '检查食堂安全设施和卫生情况',
						status: 'pending'
					},
					{
						id: '006',
						name: '校门口安全巡查',
						location: '其他',
						planTime: '18:30-19:30',
						description: '检查校门周边安全情况',
						status: 'pending'
					},
					{
						id: '007',
						name: '体育场巡查',
						location: '教学区',
						planTime: '19:30-20:30',
						description: '检查体育场设施和安全情况',
						status: 'pending'
					},
					{
						id: '008',
						name: '实验楼巡查',
						location: '教学区',
						planTime: '20:30-21:30',
						description: '检查实验楼设施和安全情况',
						status: 'pending'
					}
				],
				filteredList: []
			}
		},
		computed: {
			calculatePercent() {
				return Math.round((this.completedCount / this.totalCount) * 100);
			}
		},
		created() {
			this.getCurrentDate();
			this.filteredList = [...this.patrolList];
		},
		methods: {
			getCurrentDate() {
				const date = new Date();
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
				const weekday = weekdays[date.getDay()];
				this.currentDate = `${year}年${month}月${day}日 ${weekday}`;
			},
			getStatusText(status) {
				const statusMap = {
					'pending': '待巡查',
					'completed': '已完成'
				};
				return statusMap[status] || '未知';
			},
			navToDetail(item) {
				uni.navigateTo({
					url: `/pages/patrol/detail?id=${item.id}`
				});
			},
			resetFilter() {
				this.statusFilter = 'all';
				this.areaFilter = 'all';
			},
			confirmFilter() {
				this.showFilter = false;
				// 过滤逻辑
				this.applyFilter();
			},
			applyFilter() {
				this.filteredList = this.patrolList.filter(item => {
					let match = true;
					if (this.statusFilter !== 'all') {
						match = match && item.status === this.statusFilter;
					}
					if (this.areaFilter !== 'all') {
						match = match && item.location === this.getAreaName(this.areaFilter);
					}
					return match;
				});
			},
			getAreaName(code) {
				const areaMap = {
					'teach': '教学区',
					'live': '生活区',
					'office': '办公区'
				};
				return areaMap[code] || '';
			},
			addRecord() {
				uni.navigateTo({
					url: '/pages/patrol/add'
				});
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 30rpx;
		background-color: #f5f6fa;
		min-height: 100vh;
		padding-bottom: 120rpx;
	}
	
	.summary-card {
		background: linear-gradient(to right, #1a4380, #2b6ac4);
		border-radius: 20rpx;
		padding: 30rpx;
		color: #fff;
		box-shadow: 0 6rpx 16rpx rgba(26, 67, 128, 0.2);
		margin-bottom: 30rpx;
	}
	
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}
	
	.card-title {
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.card-date {
		font-size: 24rpx;
		opacity: 0.8;
	}
	
	.progress-info {
		margin-top: 20rpx;
	}
	
	.progress-text {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		margin-bottom: 16rpx;
	}
	
	.progress-percent {
		font-size: 48rpx;
		font-weight: bold;
	}
	
	.progress-count {
		font-size: 28rpx;
		opacity: 0.8;
	}
	
	.progress-bar {
		height: 16rpx;
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 8rpx;
		overflow: hidden;
	}
	
	.progress {
		height: 100%;
		background-color: #fff;
		border-radius: 8rpx;
		transition: width 0.3s;
	}
	
	.task-list {
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		padding: 20rpx 0;
		overflow: hidden;
	}
	
	.list-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx 20rpx;
		border-bottom: 1px solid #f5f5f5;
	}
	
	.list-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.list-filter {
		font-size: 28rpx;
		color: #1a4380;
	}
	
	.patrol-item {
		padding: 30rpx;
		border-bottom: 1px solid #f5f5f5;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
	
	.patrol-item:last-child {
		border-bottom: none;
	}
	
	.item-info {
		flex: 1;
		display: flex;
		margin-right: 20rpx;
	}
	
	.location-tag {
		background-color: #f0f7ff;
		color: #2b6ac4;
		padding: 8rpx 16rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
		margin-right: 20rpx;
		height: 36rpx;
		line-height: 36rpx;
		
		&.status-completed {
			background-color: #f6ffed;
			color: #52c41a;
		}
	}
	
	.item-content {
		flex: 1;
	}
	
	.item-name {
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 8rpx;
		display: block;
	}
	
	.item-desc {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 8rpx;
		display: block;
	}
	
	.item-time {
		font-size: 24rpx;
		color: #999;
		display: block;
	}
	
	.item-status {
		padding: 8rpx 16rpx;
		border-radius: 30rpx;
		font-size: 24rpx;
		
		&.status-pending {
			background-color: #fff2e8;
			color: #fa8c16;
		}
		
		&.status-completed {
			background-color: #f6ffed;
			color: #52c41a;
		}
	}
	
	.empty-tip {
		padding: 60rpx 0;
		text-align: center;
		color: #999;
		font-size: 28rpx;
	}
	
	.filter-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 100;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.filter-panel {
		width: 80%;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
	}
	
	.filter-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1px solid #f5f5f5;
	}
	
	.filter-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.filter-close {
		font-size: 40rpx;
		color: #999;
	}
	
	.filter-content {
		padding: 30rpx;
	}
	
	.filter-item {
		margin-bottom: 30rpx;
	}
	
	.filter-label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 16rpx;
		display: block;
	}
	
	.filter-options {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -10rpx;
	}
	
	.filter-option {
		margin: 10rpx;
		padding: 12rpx 24rpx;
		border-radius: 30rpx;
		font-size: 26rpx;
		background-color: #f5f5f5;
		color: #666;
		
		&.active {
			background-color: #1a4380;
			color: #fff;
		}
	}
	
	.filter-buttons {
		display: flex;
		border-top: 1px solid #f5f5f5;
	}
	
	.filter-reset {
		flex: 1;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		color: #666;
		background-color: #f5f5f5;
	}
	
	.filter-confirm {
		flex: 1;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		color: #fff;
		background-color: #1a4380;
	}
	
	.add-btn {
		position: fixed;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);
		background: linear-gradient(to right, #1a4380, #2b6ac4);
		height: 90rpx;
		padding: 0 50rpx;
		border-radius: 45rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 30rpx;
		box-shadow: 0 6rpx 16rpx rgba(26, 67, 128, 0.3);
	}
	
	.add-icon {
		margin-right: 10rpx;
		font-size: 36rpx;
	}
</style> 